<template>
  <div class="el-wrap">
    <!-- <div class="el-title el-text-c">{{ $route.query.courseName }}</div> -->
    <div class="el-courseware-box">
      <div class="el-courseware-left"><CourseChapter /></div>
      <div class="el-courseware-right">
        <div class="el-attend-box">
          <el-row>
            <el-select v-model="studentParam.className" placeholder="请选择班级" size="mini">
              <!-- <el-option label="全部" value="" /> -->
              <el-option v-for="(item, k) in classDatas" :key="k" :label="item.class_name" :value="item.class_name" />
            </el-select>
          </el-row>
          <el-table ref="multipleTable" class="el-attend-table" :data="studentDatas" tooltip-effect="dark" highlight-current-row border>
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column label="学生ID" prop="stuUserId" align="center" />
            <el-table-column label="学生名称" prop="stuAttendName" align="center" />
            <el-table-column label="未到" align="center">
              <template slot-scope="scope">
                <i v-if="scope.row.stuAttendState != 1" class="el-attend-btn el-icon-close el-color-error" />
                <!-- <i v-else class="el-icon-close"></i> -->
              </template>
            </el-table-column>
            <el-table-column label="已到" align="center" width="80px">
              <template slot-scope="scope">
                <i v-if="scope.row.stuAttendState == 1" class="el-attend-btn el-icon-check el-color-right" />
                <!-- <i v-else class="el-icon-close"></i> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="el-table-bottom">汇总：累计{{ statistics.signin }}个人签到，{{ statistics.absence }}个人未签到；</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
